.tour-popover {
    pointer-events: auto;
}

.tour-popover .tour-content {
    --radius: 8px;
    position: absolute;
    z-index: 10000;
    background: #fff;
    border-radius: var(--radius);
    transition: opacity 0.2s;
    min-width: 250px;
    overflow: visible !important;
}

.tour-popover .tour-content .tour-middle {
    padding: 12px;
    position: relative;
    overflow: visible !important;
}

/* 三角向上 */
.tour-popover .tour-content .triangle-bottom::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    top: -14px;
    border-color: transparent transparent #fff transparent;
    left: 50%;
    transform: translateX(-50%);
}

.tour-popover .tour-content .triangle-bottomLeft::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    top: -14px;
    border-color: transparent transparent #fff transparent;
    left: calc(var(--radius) / 2);
}

.tour-popover .tour-content .triangle-bottomRight::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    top: -14px;
    border-color: transparent transparent #fff transparent;
    right: calc(var(--radius) / 2);
}

/* 三角向下 */
.tour-popover .tour-content .triangle-top::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    bottom: -14px;
    border-color: #fff transparent transparent transparent;
    left: 50%;
    transform: translateX(-50%);
}

.tour-popover .tour-content .triangle-topLeft::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    bottom: -14px;
    border-color: #fff transparent transparent transparent;
    left: calc(var(--radius) / 2);
}

.tour-popover .tour-content .triangle-topRight::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    bottom: -14px;
    border-color: #fff transparent transparent transparent;
    right: calc(var(--radius) / 2);
}

/* 三角向左 */
.tour-popover .tour-content .triangle-right::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    left: -14px;
    border-color: transparent #fff transparent transparent;
    top: 50%;
    transform: translateY(-50%);
}

.tour-popover .tour-content .triangle-rightTop::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    left: -14px;
    border-color: transparent #fff transparent transparent;
    top: calc(var(--radius) / 2);
}

.tour-popover .tour-content .triangle-rightBottom::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    left: -14px;
    border-color: transparent #fff transparent transparent;
    bottom: calc(var(--radius) / 2);
}

/* 三角向右 */
.tour-popover .tour-content .triangle-left::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    right: -14px;
    border-color: transparent transparent transparent #fff;
    top: 50%;
    transform: translateY(-50%);
}

.tour-popover .tour-content .triangle-leftTop::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    right: -14px;
    border-color: transparent transparent transparent #fff;
    top: calc(var(--radius) / 2);
}

.tour-popover .tour-content .triangle-leftBottom::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-width: 8px;
    border-style: solid;
    right: -14px;
    border-color: transparent transparent transparent #fff;
    bottom: calc(var(--radius) / 2);
}

/* 消失时不要动画 */
.tour-popover .fade-out {
    transition: none;
}
